<template>
	<view class="flex-col page">
		<view class="flex-col">
			<MyHeader title="我的" :hidden="true"></MyHeader>
			<view class="flex-col section_4">
				<view @click="selImage" class="flex-row items-center">
					<image v-if="(userStore.userInfo.imageUrl)" class="image_6" :src="userStore.userInfo.imageUrl" />
					<u-icon size="28" v-else name="server-man"></u-icon>
					<text class="ml-20 text">{{userStore.userInfo.userName || notSetting}}</text>
				</view>
				<view class="flex-row items-center mt-13">
					<text class="font text_3">学号：</text>
					<text class="ml-10 font text_2">{{userStore.userInfo.studentId || notSetting}}</text>
				</view>
				<view class="flex-row mt-13">
					<text class="font">学院：</text>
					<text class="ml-10 font text_4">{{userStore.userInfo.departmentName || notSetting}}</text>
				</view>
			</view>
			<view class="flex-col justify-start section_5">
				<view class="flex-col list">
					<block v-for="(item, index) in menus" :key="index">
						<view class="flex-row justify-between items-center list-item" @click="item.clickTodo()">
							<view class="flex-row items-center">
								<image class="shrink-0 image_7" :src="item.icon" />
								<text class="ml-16 font_2">{{item.name}}</text>
							</view>
							<u-icon name="arrow-right"></u-icon>
						</view>
					</block>
				</view>
			</view>
		</view>
	</view>
	<!-- 上传头像 -->
	<view style="display: none;">
		<u-upload ref='imgRef' @afterRead="selHandle" :maxCount="1"></u-upload>
	</view>
</template>

<script setup>
	import {
		onShow
	} from '@dcloudio/uni-app'
	import {
		ref
	} from 'vue';
	import {
		isLoginAndGo,
	} from '../../utils';
	import {
		useUserStore
	} from '../../store/useUserStore';
	import {
		menus
	} from '@/utils/constant.js'
	import {
		uploadFile
	} from '../../utils/request';
	const notSetting = ref('没有设置')
	onShow(() => {
		// isLoginAndGo('/pages/wode/wode')
	})
	const userStore = useUserStore()
	// 上传头像业务
	const imgRef = ref(null)
	const selImage = () => {
		imgRef.value.chooseFile()
	}
	const selHandle = async (e) => {
		const filePath = e.file.url
		// 上传头像
		await uploadFile({
			url: `/UserService/userInfo/headPortrait/upload?userId=${userStore.userInfo.id}`,
			filePath,
			formData: {
				file: filePath
			}
		});
		userStore.setUserInfo()


	}
</script>

<style scoped lang="css">
	.ml-5 {
		margin-left: 10rpx;
	}

	.ml-11 {
		margin-left: 22rpx;
	}

	.mt-13 {
		margin-top: 26rpx;
	}

	.mt-166 {
		margin-top: 332rpx;
	}

	.ml-101 {
		margin-left: 202rpx;
	}

	.page {
		background-color: #f7f8fa;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;
	}

	.section {
		padding: 0 12rpx 14rpx;
		background-color: #ffffff;
	}

	.group {
		padding: 36rpx 16rpx 40rpx;
	}

	.image {
		width: 34rpx;
		height: 22rpx;
	}

	.image_2 {
		width: 30rpx;
		height: 22rpx;
	}

	.image_3 {
		width: 48rpx;
		height: 22.66rpx;
	}

	.section_2 {
		padding: 12rpx 24rpx;
		background-color: #ffffff99;
		border-radius: 50rpx;
		width: 174rpx;
		border-left: solid 1rpx #97979733;
		border-right: solid 1rpx #97979733;
		border-top: solid 1rpx #97979733;
		border-bottom: solid 1rpx #97979733;
	}

	.image-wrapper {
		width: 38rpx;
	}

	.image_5 {
		width: 38rpx;
		height: 14rpx;
	}

	.section_3 {
		background-color: #33333333;
		width: 1rpx;
		height: 37rpx;
	}

	.image_4 {
		width: 34rpx;
		height: 34rpx;
	}

	.section_4 {
		margin: 30rpx 30rpx 0;
		padding: 38rpx 36rpx 48rpx;
		background-image: linear-gradient(185deg, #9ebff0 8.9%, #b2dff700 110.8%);
		border-radius: 12rpx;
	}

	.image_6 {
		border-radius: 12rpx;
		width: 84rpx;
		height: 84rpx;
	}

	.text {
		color: #4c8eef;
		font-size: 36rpx;
		font-family: SourceHanSansCN;
		line-height: 33.26rpx;
	}

	.font {
		font-size: 24rpx;
		font-family: SourceHanSansCN;
		line-height: 22.28rpx;
		color: #333333;
	}

	.text_3 {
		line-height: 22.24rpx;
	}

	.text_2 {
		line-height: 18.22rpx;
	}

	.text_4 {
		line-height: 22.4rpx;
	}

	.section_5 {
		margin: 24rpx 30rpx 0;
		padding: 20rpx 0 72rpx;
		background-color: #ffffff;
		border-radius: 12rpx;
	}

	.list {
		margin: 0 24rpx;
	}

	.list-item {
		padding: 28rpx 12rpx 16rpx;
		border-bottom: solid 1rpx #e5e5e5;
	}

	.image_7 {
		width: 32rpx;
		height: 40rpx;
	}

	.font_2 {
		font-size: 32rpx;
		font-family: SourceHanSansCN;
		line-height: 25.96rpx;
		color: #333333;
	}

	.image_8 {
		width: 16rpx;
		height: 30rpx;
	}

	.section_6 {
		padding: 6rpx 0;
		filter: drop-shadow(0rpx -4rpx 8rpx #a1727214);
		background-color: #ffffff;
	}

	.equal-division-item {
		width: 48rpx;
		height: 48rpx;
	}
</style>